<template>
    <div class="scanResult">
        <div class="backBar">
            <van-nav-bar title="识别结果" left-text="返回" left-arrow @click-left="onClickLeft" />

        </div>
        <div class="scanContent">
            <div class="resultImg">
                <div class="resultImg">
                    <!-- 动态渲染图片 -->
                    <img v-if="imageStore.uploadedImage" :src="imageStore.uploadedImage" alt="识别图片">
                </div>
            </div>
            <div class="recogInfo">
                <div class="recogDetail" v-speak>
                    <span class="title">识别结果</span>
                    <!-- 动态渲染识别结果 -->
                    <span class="detail">{{ description }}</span>
                </div>
                <div v-if="isDangerous" v-speak class="safetyTips">
                    <span class="title">
                        <i class="iconfont icon-jinggao" style="color: #EF4444; font-size: 1.4rem;"></i>
                        <span class="titleText">安全警报（{{ dangerLevel }}）</span>
                    </span>
                    <div class="tipSection">
                        <h3>潜在风险：</h3>
                        <ul>
                            <li v-for="(reason, index) in safetyReasons" :key="'reason-' + index">
                                {{ reason }}
                            </li>
                        </ul>
                    </div>

                    <div class="tipSection">
                        <h3>安全建议：</h3>
                        <ul>
                            <li v-for="(tip, index) in safetyTips" :key="'tip-' + index">
                                {{ tip }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="voiceAnnouncements"></div>
            </div>
        </div>
        <div class="recogActionPanel">
            <van-button>
                <template #icon>
                    <i class="iconfont icon-a-057_paishe" style="color: #374151; font-size: 2.4rem;"></i>
                </template>
                重新拍摄
            </van-button>
            <van-button>
                <template #icon>
                    <i class="iconfont icon-baocun" style="color: #FFFFFF; font-size: 2.4rem;"></i>
                </template>
                保存结果
            </van-button>
            <van-button>
                <template #icon>
                    <i class="iconfont icon-hujiao" style="color: #FFFFFF; font-size: 2.1rem;"></i>
                </template>
                呼叫志愿者
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, } from 'vue-router';
import { onUnmounted, onMounted, ref } from 'vue';
import useImageStore from '@/store/imageStore';
const router = useRoute();
const imageStore = useImageStore();

// 计算属性处理结果
const analysisResult = computed(() => imageStore.analysisResult || {})

const description = computed(() => analysisResult.value.description || '正在分析环境描述...')
const isDangerous = computed(() => analysisResult.value.isDangerous)
const dangerLevel = computed(() => analysisResult.value.dangerLevel)
const safetyReasons = computed(() => analysisResult.value.safetyReasons || [])
const safetyTips = computed(() => analysisResult.value.safetyTips || [])

onMounted(() => {
    if (!imageStore.uploadedImage || !imageStore.analysisResult) {
        // 数据缺失时重定向到首页
        router.push('/aiScan');
    }
});
// 返回按钮处理
const onClickLeft = () => {
    // imageStore.clearData()
    // router.go(-1)
    history.back()
}

// 重新拍摄处理
const handleReshoot = () => {
    imageStore.clearData()
    router.push('/aiScan')
}


// 释放 Blob URL
// onUnmounted(() => {
//     if (imageFile?.url) {
//         URL.revokeObjectURL(imageFile.url);
//     }
// });
</script>

<style lang="less" scoped>
.scanResult {
    width: 100vw;
    // height: 100vh;
    // 添加顶部padding防止内容被遮挡
    padding-top: 4.6rem; // 顶部导航栏高度
    padding-bottom: 6.8rem; // 底部操作栏高度
    box-sizing: border-box;

    .backBar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .scanContent {
        width: 100vw;
        // height: calc(100vh - 6.8rem - 4.6rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: auto; // 允许垂直滚动
        flex-shrink: 0; // 防止内容挤压
        padding: 1.6rem;
        box-sizing: border-box;

        .resultImg {
            width: 34.3rem;
            height: 37.5rem;
            overflow: hidden; // 新增溢出控制

            img {
                width: 100%;
                height: 100%;
                object-fit: cover; // 保持比例填充容器
            }
        }

        .recogInfo {
            .recogDetail {
                width: 343px;
                // height: 146px;
                background: #FFFFFF rgba(0, 0, 0, 0.001);
                box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
                border-radius: 12px 12px 12px 12px;
                padding: 1.6rem;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;

                .title {
                    font-family: Roboto, Roboto;
                    font-weight: 500;
                    font-size: 18px;
                    color: #000000;
                    line-height: 28px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .detail {
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 16px;
                    color: #374151;
                    line-height: 26px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin-top: 0.8rem;
                    // 添加自动换行样式
                    white-space: normal;
                    word-break: break-word;
                }
            }

            .safetyTips {
                width: 34.3rem;
                // height: 11.3rem;
                background: #FFFFFF rgba(0, 0, 0, 0.001);
                box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
                border-radius: 12px 12px 12px 12px;
                border: 2px solid #EF4444;
                display: flex;
                flex-direction: column;
                // align-items: center;
                // justify-content: center;
                padding: 18px;
                box-sizing: border-box;

                .title {
                    // width: 100%;
                    height: 1.8rem;

                    .titleText {
                        font-family: Roboto, Roboto;
                        font-weight: 500;
                        font-size: 1.4rem;
                        color: #EF4444;
                        line-height: 2.1rem;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        margin-left: 0.8rem;
                    }
                }

                .tipSection {
                    margin-top: 1.2rem;

                    h3 {
                        font-size: 1.4rem;
                        color: #374151;
                        margin-bottom: 0.8rem;
                    }

                    ul {
                        list-style: none;
                        padding-left: 1.6rem;
                        margin: 0;
                    }

                    li {
                        position: relative;
                        font-size: 1.3rem;
                        color: #6B7280;
                        line-height: 1.8;
                        margin-bottom: 0.4rem;

                        &::before {
                            content: "•";
                            color: #EF4444;
                            font-weight: bold;
                            display: inline-block;
                            width: 1.2rem;
                            position: absolute;
                            left: -1.2rem;
                        }
                    }
                }

                .detail {
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 16px;
                    color: #374151;
                    line-height: 24px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin-top: 0.8rem;
                    // 添加自动换行样式
                    white-space: normal;
                    word-break: break-word;
                }

            }
        }
    }

    .recogActionPanel {
        width: 37.5rem;
        height: 6.8rem;
        display: flex;
        align-items: center;
        gap: 1.6rem;
        padding: 1.6rem;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #E5E7EB;
        // 添加固定定位保持底部位置
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;

        // 公共基础样式
        :deep(.van-button) {
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            border-radius: 9999px 9999px 9999px 9999px;

            flex: 1;
            height: 5.6rem;
            padding: 0 1.6rem;


            // 图标文字排列
            .van-button__content {
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                ;
                width: 100%;
                font-size: 14px;
                gap: 0.4rem;
                white-space: nowrap;
            }
        }

        // 个性样式
        :deep(.van-button:nth-child(1)) {
            // 重新拍摄
            background: #F9FAFB rgba(0, 0, 0, 0.001);
            border: 1px solid #E5E7EB;
            color: #374151;
        }

        :deep(.van-button:nth-child(2)) {
            // 保存结果
            background: rgba(37, 99, 235, 0.9);
            color: #FFFFFF;
        }

        :deep(.van-button:nth-child(3)) {
            // 呼叫志愿者
            background: rgba(239, 68, 68, 0.9);
            color: #FFFFFF;
        }

    }
}
</style>